<template>
    <view class="search-date-range">
        <view class="wrap">
            <u-icon name="calender" color="#2979ff" size="28"></u-icon>
            <view class="content">
                <text class="time-text">{{ value && value[0] ? value[0] : '开始时间' }}</text>
                <text>-</text>
                <text class="time-text">{{ value && value[1] ? value[1] : '结束时间' }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'dateRangeInput',
    props: {
        value: {
            required: true
        },
    },
}
</script>
<style scoped lang="scss">
.search-date-range {
    background-color: #fff;
    width: 100%;
    padding: 16rpx 34rpx;
    border-radius: 4px;
    font-size: 28rpx;

    .wrap {
        width: 100%;
        display: flex;
        color: #303133;

        .content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .time-text {
                flex: 1;
                text-align: center;
            }
        }
    }
}
</style>